<div class="panel panel-default" id="user_form_panel">
	<div class="panel-heading">
		<h4 class="clearfix">
			<span class="left">Form User</span>
		</h4>
		<a href="#" class="minimize">Minimize</a>
	</div>
	<div class="panel-body">
		<input type="hidden" id="user_id">
		<form class="form-horizontal" role="form" action="#" method="post" id="user_form">
			<div class="form-group">
				<label class="col-sm-2 control-label">Username</label>
				<div class="col-sm-4"><input type="text" class="form-control" id="user_name" name="user_name"></div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">Password</label>
				<div class="col-sm-4"><input type="password" class="form-control" id="user_password" name="user_password"></div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">Usergroup</label>
				<div class="col-sm-4">
					<select name="user_usergroup_id" id="user_usergroup_id" class="nostyle form-control">
					   <option></option>
					   <?php
							$this->firephp->log($usergroup);
							foreach($usergroup as $sub_usergroup){ echo '<option value="'. $sub_usergroup->usergroup_id .'">'. $sub_usergroup->usergroup_nama .'</option>'; }
					   ?>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label" for="checkboxes">Aktif</label>
				<div class="col-sm-4">
					<div id="user_aktif" class="text-toggle-button">
						<input type="checkbox" checked="checked" class="nostyle" name="user_aktif">
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4 text-center">
					<button type="button" class="btn btn-default" id="user_save">Simpan</button>
					<button type="reset" class="btn btn-default" id="user_reset">Batal</button>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="panel panel-default" id="user_grid_panel">
	<div class="panel-heading">
		<h4 class="clearfix">
			<span class="left">Data User</span>
			<div class="panel-form right clearfix" action="#" style="top:0px;">
				<div class="navbar-form" role="search">
					<div class="form-group">
						<input type="text" class="span2" placeholder="Search" id="user_search">
					</div>
					<button type="button" class="btn btn-default btn-xs" id="user_add">Tambah Data</button>
				</div>
			</div>
		</h4>
		<a href="#" class="minimize">Minimize</a>
	</div>
	<div class="panel-body">
		<table id="user_grid" class="display" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>Username</th>
					<th>Password</th>
					<th>Usergroup</th>
					<th>Aktif</th>
					<th></th>
					<th></th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<script>
$(document).ready(function() {
	var user_grid;
/* Inisialisasi Grid */
    user_grid = $('#user_grid').dataTable( {
		"bFilter":false,
		"bLengthChange" : false,
		"ordering" : false,
		"info" : false,
		"processing" : true,
		"serverSide" : true,
		"columns": [
            { "data": "user_name" },
            { "data": "user_password" },
            { "data": "user_usergroup_id" },
            { "data": "user_aktif" },
			{
				"targets": -1,
				"sWidth": 15,
				"data": null,
				"defaultContent": '<a task="update" href="#" title="Edit Data"><span class="glyphicon glyphicon-pencil"></span></a>'
			},
			{
				"targets": -1,
				"sWidth": 15,
				"data": null,
				"defaultContent": '<a task="delete" href="#" title="Delete Data"><span class="glyphicon glyphicon-trash"></span></a>'
			}
        ],
		"fnServerData": function ( sSource, aoData, fnCallback ) {
			aoData.push( { "name": "filter", "value": $('#user_search').val() } );
			$.ajax({
				"dataType": 'json',
				"type": "POST",
				"url": "c_m_user/data_list",
				"data": aoData,
				"success": fnCallback
			});
		}
	} );
	$('#user_grid tbody').on( 'click', "a[task='delete']", function () {
		var tr = $(this).parents('tr');
		var data = user_grid.fnGetData(tr);
		var konfirmasi = confirm("Apakah anda yakin untuk menghapus data ini ?");
		if(konfirmasi == true){
			$.ajax({
				url : 'c_m_user/delete',
				method : 'post',
				data : { user_id : data.user_id },
				success : function(response){
					var res = $.parseJSON(response);
					if(res.Result=='OK'){
						$.showNotify('Success','Data berhasil dihapus','success','brocco-icon-check-alt');
						reset_form();
						user_grid.fnDraw();
					}else{
						$.showNotify('Failure','Data gagal dihapus.');
					}
				}
			});
		}
    } );
	$('#user_grid tbody').on( 'click', "a[task='update']", function () {
		var tr = $(this).parents('tr');
		var data = user_grid.fnGetData(tr);
		$("#user_id").val(data.user_id);
		$("#user_name").val(data.user_name);
		$("#user_password").val(data.user_password);
		$("#user_usergroup_id").select2("val", data.user_usergroup_id);
		$("#user_name").attr("disabled", true);
		user_form_panel.toggleMax();
    } );
	$.collapsiblePanel("#user_grid_panel");
/* Akhir Inisialisasi Grid */
/* Inisialisasi Form */
	$("#user_usergroup_id").select2();
	$('#user_aktif').toggleButtons({
	    width: 160,
	    label: {
	        enabled: "Aktif",
	        disabled: "Tidak Aktif"
	    }
	});
	var user_form_panel = $.collapsiblePanel("#user_form_panel");
/* Akhir Inisialisasi From */
/* Fungsi */
	function reset_form(){
		$("#user_id").val("");
		$("#user_name").val("");
		$("#user_password").val("");
		$("#user_usergroup_id").select2("val", "");
		$("#user_name").attr("disabled", false);
		user_form_panel.toggleMin();
	}
	user_form_panel.toggleMin();
	$("#user_search").keyup(function(e){
		e.preventDefault();
		if(e.keyCode == 13){
			user_grid.fnDraw();
		}
	});
	$("#user_reset").click(function(){
		reset_form();
	});
	$("#user_save").click(function(e){
		e.preventDefault();
		var params = new Object();
		params.user_id=$('#user_id').val();
		params.form_data=$('#user_form').serializeObject();
		if(params.form_data.user_aktif == 'on'){params.form_data.user_aktif = 'y';}else{params.form_data.user_aktif = 't';}
		params=JSON.stringify(params);
		$.ajax({
			url : 'c_m_user/save',
			method : 'post',
			data : {params:params},
			success : function(response){
				var res = $.parseJSON(response);
				if(res.Result=='OK'){
					$.showNotify('Success','Data berhasil disimpan','success','brocco-icon-check-alt');
					reset_form();
					user_grid.fnDraw();
				}else{
					$.showNotify('Failure','Data gagal disimpan.');
				}
			}
		});
	});
	$("#user_add").click(function(){
		user_form_panel.toggleMax();
	});
/* Akhir Fungsi */
});
</script>